<!-- 黑名单新增/修改弹窗 -->
<template>
    <div>
        <el-dialog width="650px" :title="titleText()" :visible.sync="dialogVisible"  :append-to-body="true"  :before-close="()=>clickClose(false)">
            <div class="listBoxDialog" style="height: auto">
                <div class="showContentDialog" style="margin: 0;overflow: auto">
                    <div class="contentBoxDialog">
                        <div >
                            <el-form ref="form" :rules="rules" :label-position="labelPosition" label-width="100px" :model="form" label-suffix="："
                                     @submit.native.prevent="save">
                                <el-row :label-position="labelPosition">
                                    <el-col >
                                        <el-form-item label="职务层级"  >
                                            <el-breadcrumb >
                                                <el-breadcrumb-item v-for="(p) in dataSource.pathData" :key="p.id">
                                                    <el-link type="primary">{{p.label}}</el-link>
                                                </el-breadcrumb-item>
                                            </el-breadcrumb>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :label-position="labelPosition">
                                    <el-col :span="12">
                                        <el-form-item label="名称" prop="dutyName" required>
                                            <el-input placeholder="请输入..."  v-model="form.dutyName" maxlength="20" show-word-limit clearable />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="类型" prop="dutyKind" required>
                                            <enum-select :defaultVal="form.dutyKind" codePath="app/dutyKind"   @changeSelect="value=>form.dutyKind = value.val"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :label-position="labelPosition">
                                    <el-col :span="12">
                                        <el-form-item label="级别" prop="dutyLevel" required >
                                            <enum-select :defaultVal="form.dutyLevel" codePath="app/dutyLevel"   @changeSelect="value=>form.dutyLevel = value.val"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :label-position="labelPosition">
                                    <el-col :span="12">
                                        <el-form-item label="备注" prop="dutyRemark">
                                            <el-input type="textarea" rows="3" v-model="form.dutyRemark" style="width: 475px"
                                                      maxlength="50" resize="none" show-word-limit/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer" style="margin-top: 15px" >
                    <el-button type="primary" @click="save()" :loading="loading">保存</el-button>
                    <el-button type="primary" @click="clickClose(false)" >返回</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
  components: {
  },
  props: {
    dataSource: {
      type: Object,
      default () {
        return {
          pathData: []
        }
      }
    }
  },
  data () {
    return {
      dialogVisible: true,
      labelPosition: 'right',
      loading: false,
      form: {
        dutyInfoId: null,
        parentid: null,
        dutyName: null,
        dutyKind: null,
        dutyLevel: null,
        dutyRemark: null
      },
      rules: {
        dutyName: [{ required: true, message: '职务名称为必填项！' }],
        dutyKind: [{ required: true, message: '职务类型为必选项！' }],
        dutyLevel: [{ required: true, message: '职务级别为必选项！' }],
      }
    }
  },
  created () {
    if (this.dataSource != null) {
      this.form.dutyInfoId = this.dataSource.dutyInfoId
      this.form.dutyName = this.dataSource.dutyName
      this.form.dutyKind = this.dataSource.dutyKind
      this.form.dutyLevel = this.dataSource.dutyLevel
      this.form.dutyRemark = this.dataSource.dutyRemark
    }
    this.form.parentid = this.dataSource.parentid
  },
  methods: {
    save () {
      this.$refs.form.validate((valid, error) => {
        if (!valid) {
          this.$messageBox.error(Object.values(error)[0][0].message)
        } else {
          if (this.dataSource.pathData.length >= 3) {
            this.$messageBox.error('无三级员工级别,不可再添加！')
            return
          }
          this.loading = true
          if (this.isAdd()) {
            this.$app.manageApi.saveSysDutyInfo(this.form).then((res) => {
              this.$messageBox.success('保存成功！')
              this.form.dutyInfoId = res.id
              this.clickClose(true)
            }).catch(err => console.error(err))
              .finally(() => {
                this.loading = false
              })
          } else {
            this.$app.manageApi.updateSysDutyInfo(this.form).then(() => {
              this.$messageBox.success('保存成功！')
              this.clickClose(true)
            }).catch(err => console.error(err))
              .finally(() => {
                this.loading = false
              })
          }
        }
      })
    },
    isAdd () {
      if (this.form.dutyInfoId == null) {
        return true
      } else {
        return false
      }
    },
    titleText () {
      if (this.isAdd()) {
        return '新增'
      }
      return '修改'
    },
    clickClose (isUpdate) {
      this.$emit('clickClose', isUpdate, this.form)
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped>
   .contentBoxDialog .el-breadcrumb{
        line-height: 2;
    }
</style>
